import React, { useState, useEffect, useRef } from "react";
import { Contact, AddO, Edit } from "@react-vant/icons";
import { PullRefresh, Popup, Empty, Tabs, Toast, Button } from "react-vant";
import { useNavigate } from "react-router-dom";
import axios from "../utils/request";
type Props = {};

const GoContacts = (props: Props) => {
  const navigate = useNavigate();
  const [data, setData] = useState([]);
  useEffect(() => {
    (async () => {
      let res = await axios.get("/passengerList");
      setData(res.data);
    })();
  }, []);
  //切换账号
  const [showCloseIcon, setShowCloseIcon] = useState(false);
  const switchUser = () => {
    setShowCloseIcon(true);
  };
  //退出登录
  const exit = () => {
    navigate("/login");
    localStorage.removeItem("token");
    localStorage.removeItem("username");
  };
  //获取本地username
  const username = localStorage.getItem("username");
  //返回上一页
  const btn = () => {
    // navigate("/filling");
    /****** */
  };
  //下拉
  const [count, setCount] = useState<number>(0);
  const onRefresh = (showToast: any) => {
    return new Promise((resolve) => {
      setTimeout(() => {
        if (showToast) {
          Toast.info("刷新成功");
        }
        setCount(count + 1);
        resolve(true);
      }, 1000);
    });
  };
  //点击全选框
  const allChe = (e: any, id: any) => {
    let val = e.target.checked;
    (async () => {
      let res = await axios.post(`/allChecked/${id}`, {
        params: val,
      });
      setData(res.data);
    })();
  };
  //页面刷新 统一给false
  // useEffect(() => {
  //   (async () => {
  //     let res = await axios.post("/allChecked", { params: false });
  //     setData(res.data);
  //   })();
  // }, []);
  //跳转到新增乘客
  const goAdd = () => {
    navigate("/addcontacts");
  };

  //携带参数跳转编辑
  const edit = (item: any) => {
    navigate("/editcontacts", { state: item });
  };
  //点击确认选择乘客
  const shuju = JSON.parse(localStorage.getItem("arr") as any);
  console.log(shuju);

  const gofilling = () => {
    let arr = data.filter((item: any) => item.flag === "true");

    localStorage.setItem("arr", JSON.stringify(arr));
    navigate("/filling");
  };
  return (
    <div className="contacts">
      <header>
        <div className="box1">
          <span onClick={btn} style={{ fontSize: "24px" }}>
            {"<"}
          </span>
          <span>乘客列表</span>
          <span></span>
        </div>
        <div className="box2">
          <div className="top">
            <Contact fontSize={"20px"} />
          </div>
          <span>{username}</span>
          <div onClick={switchUser} style={{ color: "#fff", fontSize: "12px" }}>
            切换账号&emsp;{">"}
          </div>
        </div>
      </header>
      <main>
        <div style={{ width: "100%", height: "20px" }}></div>
        <Button onClick={goAdd} round size="large" type="default">
          <span
            style={{
              color: "rgb(0, 172, 189)",
              display: "flex",
              alignItems: "center",
            }}
          >
            <AddO />
            &nbsp; 新增乘客
          </span>
        </Button>
        <div className="box">
          <div className="refresh">下拉可刷新乘客列表</div>
          <div className="box_item">
            <Tabs>
              <Tabs.TabPane>
                <PullRefresh
                  onRefresh={() => onRefresh(true)}
                  onRefreshEnd={() => console.log("onRefreshEnd")}
                >
                  <div className="n">
                    {data.length > 0 ? (
                      data.map((item: any, index) => {
                        return (
                          <div className="box_id" key={index}>
                            <div onClick={() => edit(item)} className="zuo">
                              <Edit />
                            </div>
                            <div className="zhong">
                              <div className="zhong_box">
                                <h4>{item.name}</h4>
                                <span className="s1">{item.status}</span>
                              </div>
                              <p>
                                <span>身份证</span>
                                &nbsp;
                                <span>{item.id_number}</span>
                              </p>
                            </div>
                            <div className="you">
                              <input
                                checked={JSON.parse(item.flag)}
                                onChange={(e) => allChe(e, item.id)}
                                type="checkbox"
                              />
                            </div>
                          </div>
                        );
                      })
                    ) : (
                      <Empty description="暂无数据" />
                    )}
                  </div>
                </PullRefresh>
              </Tabs.TabPane>
            </Tabs>
          </div>
        </div>
        <Popup
          visible={showCloseIcon}
          style={{ height: "30%" }}
          position="bottom"
          onClose={() => setShowCloseIcon(false)}
        >
          <div style={{ width: "100%", height: "30px" }}> </div>

          <Button round type="info" size="large">
            切换账号
          </Button>
          <div style={{ width: "100%", height: "30px" }}> </div>
          <Button onClick={exit} round type="primary" size="large">
            退出登录
          </Button>
        </Popup>
      </main>
      <footer>
        <Button onClick={gofilling} round color="rgb(0, 172, 189)">
          确定
        </Button>
      </footer>
    </div>
  );
};

export default GoContacts;
